<template>
    <div class="body">
        <button class="operation btn btn-primary" data-toggle="modal" data-target=".category-first">添加分类</button>
        <table class="table table-bordered">
            <tbody><tr>
                <th>分类的编号</th>
                <th>分类名称</th>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
            </tbody></table>
        <div class="btn-group page">
            <div class="btn btn-default" @click="getPrev">上一页</div>
            <div class="btn btn-default" @click="getNext">下一页</div>
        </div>
        <div class="modal fade category-first">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                        <h4 class="modal-title" id="myLargeModalLabel">添加分类</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入分类的名称" v-model="newCate1">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="addCate1">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
       data(){
           return{
                list:[],
                total:1,
                page:1,
               //pageCount:Math.ceil(this.total/this.pageSize),
               //pageSize:2,
               newCate1:''
           }
       },
        created(){
            this.getCate1List();
        },
        methods:{
            getCate1List(){
                this.$http.get('http://127.0.0.1:3002/getCate1List?page='+this.page).then((result)=>{
                    if(result.body.status == 0){
                        this.list = result.body.message;
                        this.total = result.body.total[0].NUM;
                    }else{
                        Toast('您的网络抽风了');
                    }
                });
            },
            //由于后端接口并没有进行完善的设计，上一页和下一页按钮会出现一些问题。
            getNext(){
                if(this.page>= Math.ceil(this.total/2)){
                    this.page = Math.ceil(this.total/2);
                    this.getCate1List();
                }else {
                    this.page++;
                    this.getCate1List();
                }
            },
            getPrev(){
                if(this.page <= 1){
                    this.page = 1
                    this.getCate1List();
                }else {
                    this.page--;
                    this.getCate1List();
                }
            },
            addCate1(){
                this.$http.get('http://127.0.0.1:3002/addCate1?newCate1='+this.newCate1).then((result)=>{
                    if(result.body.status == 0){
                        Toast(result.body.message);
                        location.reload();
                    }else {
                        Toast('你的网络抽风');
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>